<template>
  <div class="flex justify-between items-center mt-1.5">
    <span class="tip" :class="[item.status]" v-for="(item, index) of stronger" :key="index"></span>
    <span class="ml-1 mr-1">{{ tipValue }}</span>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { watch, ref } from 'vue'

  interface StrongTip {
    status: 'normal' | 'low' | 'middle' | 'strong'
  }

  const props = defineProps({
    inputValue: {
      type: String,
      default: '',
    },
    lowReg: {
      type: RegExp,
      default: /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/,
    },
    middleReg: {
      type: RegExp,
      default: /^[A-Za-z0-9]{6,16}$/,
    },
    strongReg: {
      type: RegExp,
      default: /^\w{6,16}$/,
    },
  })
  const stronger = reactive<StrongTip[]>([
    {
      status: 'normal',
    },
    {
      status: 'normal',
    },
    {
      status: 'normal',
    },
  ])
  const tipValue = ref('弱')
  watch(
    () => props.inputValue,
    () => {
      if (props.lowReg.test(props.inputValue)) {
        stronger[0].status = 'low'
        stronger[1].status = 'normal'
        stronger[2].status = 'normal'
        tipValue.value = '弱'
      } else if (props.middleReg.test(props.inputValue)) {
        stronger[0].status = 'low'
        stronger[1].status = 'middle'
        stronger[2].status = 'normal'
        tipValue.value = '中'
      } else if (props.strongReg.test(props.inputValue)) {
        stronger[0].status = 'low'
        stronger[1].status = 'middle'
        stronger[2].status = 'strong'
        tipValue.value = '强'
      } else {
        stronger.forEach((it) => (it.status = 'normal'))
      }
    }
  )
</script>
<style scoped lang="less">
  .tip {
    height: 10px;
    border-radius: 2px;
    background-color: #fff;
    width: 28%;
  }

  .normal {
    background-color: #f3f3f3;
  }

  .low {
    background-color: #f00;
  }

  .middle {
    background-color: #dceb0c;
  }

  .strong {
    background-color: #0c94ee;
  }
</style>
